---
title: Non-mercator projection
description: Using non mercator tiles with <code>L.esri.TiledMapLayer</code> with the <a href="https://github.com/kartena/Proj4Leaflet">Proj4Leaflet</a> plugin. <br><br> <strong>This demo should be implemented at your own risk. Esri Leaflet only supports tiles that have been published in Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857). Strong knowledge of projections, spatial references and tiling schemes is required for this.</strong>
layout: example.hbs
---

<!-- Proj4 and Proj4Leaflet -->
<script src="https://unpkg.com/proj4@2.4.3"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.1"></script>

<div id="map"></div>

<script>
  /* create new Proj4Leaflet CRS:
  1. Proj4 and WKT definitions can be found at sites like http://epsg.io, http://spatialreference.org/ or by using gdalsrsinfo http://www.gdal.org/gdalsrsinfo.html
  2. Appropriate values to supply to the resolution and origin constructor options can be found in the ArcGIS Server tile server REST endpoint (ex: https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer).
  3. The numeric code within the first parameter (ex: `27700`) will be used to project the dynamic map layer on the fly
  */
  var crs = new L.Proj.CRS('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs', {
    origin: [-5781523.997920001, 4883853.592504997],
    resolutions: [
      132291.9312505292,
      66145.9656252646,
      26458.386250105836,
      19843.789687579378,
      13229.193125052918,
      6614.596562526459,
      2645.8386250105837,
      1322.9193125052918,
      661.4596562526459,
      264.5838625010584,
      132.2919312505292,
      66.1459656252646,
      26.458386250105836,
      19.843789687579378,
      13.229193125052918,
      6.614596562526459,
      2.6458386250105836,
      1.3229193125052918,
      0.6614596562526459
    ]
  });

  var map = L.map('map', {
    crs: crs
  }).setView([53.386, -2.319], 7);

  // The min/maxZoom values provided should match the actual cache thats been published. This information can be retrieved from the service endpoint directly.
  L.esri.tiledMapLayer({
    url: 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer',
    maxZoom: 19,
    minZoom: 6,
  }).addTo(map);

  // Dynamic map layers are projected by ArcGIS Server itself before the image is retrieved
  L.esri.dynamicMapLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer",
    layers: [0],
    opacity: 0.4
  }).addTo(map);
</script>
